<!--
 * @Author: 471826078@qq.com
 * @Date: 2020-06-02 10:10:18
 * @LastEditors: zhangfan
 * @LastEditTime: 2021-06-16 13:47:45
-->
<template>
  <div>
    <el-dialog
      :title="excelTitle"
      :visible.sync="dialogFormVisible"
      width="516px"
      :close-on-click-modal="false"
      :before-close="handleDimissionClose"
      :modal-append-to-body="false"
    >
      <div :class="{ checkStyle: mark && mark == 'projectDetailReport' }">
        <!-- <el-tree
          :data="colmnList"
          :props="defaultProps"
          show-checkbox
          node-key="prop"
          :default-expand-all="true"
          :check-strictly="checkStrictly"
          :default-checked-keys="checkedKeys"
          :accordion="true"
          ref="columnTree"
          @check-change="handleCheckChange"
        ></el-tree> -->
        <!-- <p style="padding: 5px 0px">导出行维度</p> -->
        <!-- <el-radio-group v-model="rowDimensionSelcted" @change="rowDimensionChange">
          <el-radio :label="item.type" :key="index" v-for="(item,index) in rowDimensionList" style="padding:5px 0px">
              {{item.name}}
          </el-radio>
        </el-radio-group> -->
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
          label-position="top"
        >
          <el-form-item label="导出行业范围" prop="industryNameSelcted">
            <el-radio-group
              v-model="ruleForm.industryNameSelcted"
              @change="rowDimensionChange"
            >
              <el-radio
                label="total"
                name="type"
                style="padding: 5px 10px; display: block"
                :disabled="isDisabled"
                >只导出行业总计</el-radio
              >
              <el-radio
                label="all"
                name="type"
                style="padding: 5px 10px; display: block"
                :disabled="isDisabled"
                >同时导出行业总计及各行业情况统计</el-radio
              >
              <el-radio
                :label="industryNameValue"
                name="type"
                style="padding: 5px 10px; display: block"
              >
                <span>只导出某行业</span>
                <el-select
                  v-model="industryNameValue"
                  placeholder="请选择"
                  @change="selectChanged"
                >
                  <el-option
                    v-for="item in industryOptions"
                    :key="item.code"
                    :label="item.name"
                    :value="item.code"
                  >
                  </el-option>
                </el-select>
              </el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="导出投资类别范围" prop="investmentNameSelcted">
            <el-radio-group
              v-model="ruleForm.investmentNameSelcted"
              @change="investmentNameSelctedChange"
            >
              <el-radio
                label="total"
                name="type"
                style="padding: 5px 10px; display: block"
                >只导出投资类别总计</el-radio
              >
              <el-radio
                label="all"
                name="type"
                style="padding: 5px 10px; display: block"
                >同时导出投资类别总计及各类别情况统计</el-radio
              >
              <el-radio
                :label="investmentNameValue"
                name="type"
                style="padding: 5px 10px; display: block"
              >
                <span>只导出某投资类别</span>
                <el-select
                  v-model="investmentNameValue"
                  placeholder="请选择"
                  @change="selectinvestChanged"
                >
                  <el-option
                    v-for="item in investmentNameList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="handleDimissionClose" class="cancel"
          >关闭</el-button
        >
        <el-button
          type="primary"
          @click.native="confirmExcel('ruleForm')"
          class="save"
          >{{ btnValue }}</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { mapState } from 'vuex'
export default {
  name: 'exportExcel',
  data() {
    return {
      checkStrictly: true,
      isDisabled: false,
      defaultArr: [],
      selectMenuId: [],
      checkedKeys: [],
      industryNameValue: '',
      investmentNameValue: '',
      defaultProps: {
        children: 'children',
        label: 'label',
      },
      investmentNameList: [
        { value: 'GOV', label: '政府投资' },
        { value: 'GOV_AND_SOCIETY', label: '政府与社会共筹' },
        { value: 'NATIONAL', label: '国企项目' },
        { value: 'NOT_GOV', label: '非政府投资' },
        { value: 'OTHERS', label: '其他工程项目' },
      ],
      ruleForm: {
        industryNameSelcted: 'total',
        investmentNameSelcted: 'total',
      },
      rules: {
        industryNameSelcted: [
          { required: true, message: '请选择具体行业', trigger: 'change' },
        ],
        investmentNameSelcted: [
          { required: true, message: '请选择具体投资类别', trigger: 'change' },
        ],
      },
      btnValue: '导出',
      // rowDimensionSelcted: "area",
      childData: [],
      dimissionDialogVisible: false, //离职dialog
    }
  },
  props: {
    excelTitle: {
      //导出单个表格时需传入 导出报表名称
      type: String,
      default: '导出报表',
    },
    showExcel: {
      type: Boolean,
      default: false,
      required: true,
    },
    rowDimensionList: {
      type: Array,
      required: true,
    },
    mark: {
      type: String,
    },
    rowDimensionSelcted: {
      type: String,
    },
    dialogFormVisible: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    ...mapState(['industryOptions']),
  },
  created() {
    this.ishangyezhuguang()
  },
  methods: {
    ishangyezhuguang() {
      if (this.$store.state.userType == 'DIRECTOR') {
        this.isDisabled = true
        this.ruleForm.industryNameSelcted = this.industryNameValue
      }
    },
    selectChanged(value) {
      if (
        this.ruleForm.industryNameSelcted != 'all' &&
        this.ruleForm.industryNameSelcted != 'total'
      ) {
        this.ruleForm.industryNameSelcted = value
      }
    },
    selectinvestChanged(value) {
      if (
        this.ruleForm.investmentNameSelcted != 'all' &&
        this.ruleForm.investmentNameSelcted != 'total'
      ) {
        this.ruleForm.investmentNameSelcted = value
      }
    },
    /**
     * @description: 行维度选择
     */
    rowDimensionChange() {
      this.$emit('getSelctedVal', this.ruleForm)
    },
    // 获取默认导出的字段数组
    getTableAllLists() {
      this.getCheckedNode(this.colmnList)
      // 给选中的节点前添加对号
      this.checkedKeys = this.defaultArr
      this.checkStrictly = false
    },
    handleCheckChange(data, checked, indeterminate) {
      const arr = this.$refs.columnTree
        .getCheckedKeys()
        .concat(this.$refs.columnTree.getHalfCheckedKeys())
      if (this.mark && this.mark == 'projectDetailReport') {
        //项目明细报表
        this.childData = []
        for (let i = 0, len = this.colmnList.length; i < len; i++) {
          this.childData = this.childData.concat(this.colmnList[i].children)
        }
        this.setDefaultFalse(this.childData)
        this.setDefauled(arr, this.childData)
      } else {
        this.setDefaultFalse(this.colmnList)
        this.setDefauled(arr, this.colmnList)
      }
    },
    //设置选中节点为导出字段
    setDefauled(arr, list) {
      for (let item of arr) {
        for (let items of list) {
          if (item == items.prop) {
            items.isShow = true
          }
          if (items.children) {
            this.setDefauled(arr, items.children)
          }
        }
      }
    },
    closeExcel() {
      this.$emit('closeExcel', {})
    },
    //所有默认导出设置为否
    setDefaultFalse(arr) {
      for (let item of arr) {
        item.isShow = false
        if (item.children) {
          this.setDefaultFalse(item.children)
        }
      }
    },
    getCheckedNode(arr) {
      for (let item of arr) {
        // if(this.mark && this.mark == "projectDetailReport") {
        //   let childrenArr = item.children;
        //   for(let items of childrenArr) {
        //     if (items.isShow) {
        //       this.defaultArr.push(items.prop);
        //     }
        //   }
        // }else{
        if (item.isShow) {
          this.defaultArr.push(item.prop)
        }
        if (item.children) {
          this.getCheckedNode(item.children)
        }
        // }
      }
    },
    confirmExcel(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$emit('getExportList', this.ruleForm)
        } else {
          return false
        }
      })
    },
    handleDimissionClose() {
      // this.dimissionDialogVisible = false;
      this.$emit('closeDialog')
    },
  },
}
</script>
<style lang="less" scoped>
// .export {
//   position: fixed;
//   top: 0;
//   left: 0;
//   right: 0;
//   bottom: 0;
//   z-index: 20;
//   overflow: auto;
//   background-color: rgba(0, 0, 0, 0.4);
//   &_box {
//     position: relative;
//     margin: 15vh auto;
//     width: 716px;
//     border-radius: 8px;
//     background-color: #fff;
//     &_header {
//       padding: 20px 30px;
//       border-bottom: 0.1px solid #ccc;
//       position: relative;
//       &_title {
//         line-height: 24px;
//         font-size: 18px;
//         color: #303133;
//       }
//       button {
//         outline: none;
//         border: none;
//         position: absolute;
//         top: 20px;
//         right: 20px;
//         font-size: 16px;
//         background-color: #fff;
//         &:hover {
//           color: #409eff;
//         }
//       }
//     }
//     &_main {
//       min-height: 100px;
//       padding: 20px 30px;
//       min-height: 200px;
//       max-height: 600px;
//       overflow: auto;
//       .el-checkbox {
//         display: block;
//         line-height: 40px;
//       }
//       // .is-checked{
//       //   background-color: #f1f2f4;
//       // }
//       &_title {
//         display: flex;
//         height: 50px;
//         align-items: center;
//       }
//       .el-checkbox-group {
//         margin-left: 50px;
//       }
//     }
//     &_footer {
//       height: 50px;
//       line-height: 50px;
//       background-color: #f0f4f7;
//       padding: 0 20px;
//       box-sizing: border-box;
//       text-align: right;
//       border-radius: 0 0 8px 8px;
//     }
//   }
// }
// .el-button--primary.is-disabled {
//   background-color: gray;
//   border-color: gray;
// }
.checkStyle/deep/
  .el-tree
  > .el-tree-node
  > .el-tree-node__content
  .el-checkbox {
  display: none !important;
}
</style>
